<template>
	<view class="content">
		<!--地图-->
		<view class="map">
			<map style="width: 100%; height: 300px;" :latitude="mapData.latitude" :longitude="mapData.longitude"
				:markers="mapData.pois" enable-3D="true">
			</map>
		</view>
		<view class="box-body">
			<!--中间内容-->
			<view class="body-content">
				<view class="title-text">
					<p>打开出行服务</p>
					<p>可查看实时公交地铁信息</p>
					<p>聆听FM-广州电台，打车，行程等更多服务...</p>
				</view>
				<!--嵌入腾讯出行服务 打开半屏小程序-->
				<view class="openMini" hover-class="openMini-active" @click="openMini">
					打开出行服务
				</view>
				<!--346-->
				<view class="travel-info">
					<view class="title-text">
						<p style="color: #ffaa00;">滑动图片查看更多站点!!!</p>
						<p>346公交</p>
						<p>首发站：穗丰村(广州理工学院)总站 6:30-20:00</p>
						<p>终点站：天河客运站 7:00-20:00</p>
						<p>周五六日末班为21:00</p>
					</view>
					<scroll-view scroll-y="true" style="height: 30vh;overflow: auto;">
						<image class="img" src="https://yj.xiesinder.cn/prophet/travel_mode/346.jpg" mode="widthFix" lazy-load="true">
						</image>
					</scroll-view>
				</view>
				<!--354-->
				<view class="travel-info">
					<view class="title-text">
						<p>354公交</p>
						<p>首发站：穗丰村(广州理工学院)总站 6:30-20:00</p>
						<p>终点站：长平村，地铁长平站，地铁长平总站(都可到地铁)</p>
						<p>高峰期20分钟一班，平时30分钟一班</p>
					</view>
					<scroll-view scroll-y="true" style="height: 30vh;overflow: auto;">
						<image class="img" src="https://yj.xiesinder.cn/prophet/travel_mode/354.jpg" mode="widthFix" lazy-load="true">
						</image>
					</scroll-view>
				</view>
				<!--专线七-->
				<view class="travel-info">
					<view class="title-text">
						<p>节假日专线七</p>
						<p>首发站：穗丰村(广州理工学院)总站 9:00-19:30</p>
						<p>终点站：动物园南门总站</p>
						<p>途经体育西路地铁站，动物园南门地铁站</p>
						<p>只在周五六日及节假日发车，其余时间不发车</p>
					</view>
					<scroll-view scroll-y="true" style="height: 30vh;overflow: auto;">
						<image class="img" src="https://yj.xiesinder.cn/prophet/travel_mode/专线7.jpg" mode="widthFix" lazy-load="true">
						</image>
					</scroll-view>
				</view>
				<!--973-->
				<view class="travel-info">
					<view class="title-text">
						<p>973公交</p>
						<p>首发站：兴丰村总站-穗丰村(广州理工学院)站 6:30-21:00</p>
						<p>终点站：太和地铁站-太和(丰泰横路)总站</p>
						<p>途经太和地铁站14号线</p>
						<p>前往增城广场，嘉禾望岗，从化客运站可乘坐此线路</p>
					</view>
					<scroll-view scroll-y="true" style="height: 30vh;overflow: auto;">
						<image class="img" src="https://yj.xiesinder.cn/prophet/travel_mode/973.jpg" mode="widthFix" lazy-load="true">
						</image>
					</scroll-view>
				</view>
				<!--如约巴士-->
				<view class="travel-info">
					<view class="title-text">
						<p>如约巴士</p>
						<p>票价9-12元，只支持线上购票</p>
						<p>周一到周五发班两次，周末和节假日发班12次</p>
						<p>可通过微信搜索“广州如约巴士”搜索“穗丰村”即可查询出行线路</p>
					</view>
					<scroll-view scroll-y="true" style="height: 30vh;overflow: auto;">
						<image class="img" src="https://yj.xiesinder.cn/prophet/travel_mode/如约巴士.jpg" mode="widthFix" lazy-load="true">
						</image>
					</scroll-view>
				</view>
				<!--数据来源-->
				<view class="title-text">
					<p>数据来源：广州交通·行讯通</p>
					<p>可以小程序搜索“广州交通行讯通”</p>
					<p>里面除了可以看交通线路，还可以找附近公厕，很实用！！！</p>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex'
	// 引入高德地图
	import amap from '@/utils/map/amap-wx.js'
	export default {
		data() {
			return {
				amapPlugin: null,
				key: '6fbff57760181e9fc14cc6aeac45a34d',
				mapData: {
					longitude: '113.45641',
					latitude: '23.260134',
					pois: [
						{
							id: 0,
							longitude: '113.45641',
							latitude: '23.260134',
							width: 20,
							height: 35
						}
					]
				}
			}
		},
		onLoad() {
			// 初始化高德sdk对象
			this.amapPlugin = new amap.AMapWX({
				key: this.key
			});
			this.getRegeo()
		},
		onShow() {},
		// 计算属性
		computed: {
			...mapState('user', ['modalShow', 'loginState', 'openId'])
		},
		methods: {
			...mapActions('user', ['openModalAction']),
			// 打开"腾讯出行服务小程序"
			openMini() {
				// uni.openEmbeddedMiniProgram => 是半开屏打开，需要被开屏的小程序授权同意
				uni.navigateToMiniProgram({
					appId: 'wx65cc950f42e8fff1', // 小程序的 AppID
					path: '/launch/launch?target=index&tab=1&from=open', // 跳转路径
				})
			},
			// 加载地图数据
			async getRegeo() {
				uni.showLoading({
					title: '获取信息中'
				})
				// 获取当前自己定位信息
				await uni.getLocation({
					type: 'gcj02',
					isHighAccuracy: true,
					success: (data) => {
						this.mapData.latitude = data.latitude
						this.mapData.longitude = data.longitude
						// 撒点
						this.mapData.pois[0].latitude = data.latitude
						this.mapData.pois[0].longitude = data.longitude
					},
					fail: (err) => {
						console.log('getLocation获取定位失败：' + err)
					}
				})
				await this.amapPlugin.getRegeo({
					location: this.mapData.longitude + "," + this.mapData.latitude,
					// location: '113.45641,23.260134',
					success: (data) => {
						console.log('地图绘制成功')
						// this.mapData.longitude = data[0].longitude
						// this.mapData.latitude = data[0].latitude
						// this.mapData.pois = data[0].regeocodeData.pois
					},
					fail: (err) => {
						console.log(err)
					}
				})
				uni.hideLoading();
			}
		}
	}
</script>

<style scoped lang="scss">
	page {
		background: #f8f8f8;
	}

	.content {
		width: 100%;

		// 地图
		.map {
			width: 90%;
			// height: 800rpx;
			left: 5%;
			position: relative;
			/* 超出隐藏需要加上 */
			overflow: hidden;
			height: 450rpx;
			margin-top: 5rpx;
		}

		// 中间内容
		.box-body {
			width: 90%;
			// height: 800rpx;
			left: 5%;
			position: relative;
			/* 超出隐藏需要加上 */
			overflow: hidden;
			margin-top: 30rpx;
			box-shadow: 0 2rpx 4rpx 0 rgba(0, 0, 0, 0.2), 0 3rpx 6rpx 0 rgba(0, 0, 0, 0.19);

			.body-content {
				float: left;
				align-items: center;
				justify-content: center;
				// height: 700rpx;
				margin-top: 30rpx;
				width: 90%;
				margin-left: 5%;
				color: #848484;
				line-height: 55rpx;
				text-indent: 2em;

				.title-text {
					width: 90%;
					margin: 10rpx 5% 10rpx 5%;
					color: #00aaff;
					text-align: left;
					text-indent: 0em;
					line-height: 30rpx;
					font-size: 20rpx;
				}

				.openMini {
					width: 90%;
					height: 100rpx;
					margin: 10rpx 5% 10rpx 5%;
					// background: #0ab99c;
					background: radial-gradient(circle, #0ab99c ,#57f9cb);
					color: #fff;
					border-radius: 10rpx;
					text-align: center;
					line-height: 100rpx;
					text-indent: 0em;
				}

				.openMini-active {
					opacity: 0.5;
					box-shadow: 0 2rpx 4rpx 0 #0ab99c;
				}
				
				.travel-info {
					width: 90%;
					margin: 10rpx 5% 10rpx 5%;
					
					.title-text {
						width: 90%;
						margin: 10rpx 5% 10rpx 5%;
						color: #00aaff;
						text-align: left;
						text-indent: 0em;
						line-height: 30rpx;
						font-size: 20rpx;
					}
				}
			}
		}
	}
</style>